<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/list.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <div class="nav">
        <img src="image/logo.jpg" alt="logo">
        <span class="title1">我的博客系统</span>
        <a href="home.html">主页</a>
        <a href="personlist.html">我的</a>
        <a href="edit.html">创作</a>
        <a href="logout">注销</a>
    </div>

    <div class="parent">
        <div class="left">
            <div class="card">
                <img src="image/头像.jpg">
                <span class="name"></span>
                <a href="#">github 地址</a>
                <div class='one'>
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class='one'>
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <div class="right">
            <!-- <div class="article">
                <h2 class="title">我的第一篇博客</h2>
                <span class="date">2022-4-17</span>
                <div class="desc">今天开始我要认真写博客 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore similique, nobis labore, officiis harum vel amet iste enim, cupiditate eveniet dolores optio eligendi in dicta veniam obcaecati rerum voluptas ipsum.</div>
                <a href="art.html" class="more">查看全文&gt;&gt;</a>
            </div> -->
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        $.ajax({
            url: "user",
            method: "GET",
            success: function(data,status){
                let username = document.querySelector('.name');
                username.innerHTML = data.username;
            }
        })

        $.ajax({
            url: "index",   
            method: "GET",
            success: function(data,status) {
                buildBlogs(data);
            }
        })

        function buildBlogs(blogs){
            let rightDiv = document.querySelector('.right');
            for(let blog of blogs){
                let blogDiv = document.createElement('div');
                blogDiv.className = 'article';
                // 创建 title
                let h2 = document.createElement('h2');
                h2.className = 'title';
                h2.innerHTML = blog.title;
                blogDiv.appendChild(h2);
                // 创建 postTime
                let postTime = document.createElement('span');
                postTime.className = 'date';
                postTime.innerHTML = DateFormat(blog.postTime);
                blogDiv.appendChild(postTime);
                // 创建 content
                let content = document.createElement('div');
                content.className = 'desc';
                content.innerHTML = blog.content;
                blogDiv.appendChild(content);
                // 创建 详情页的超链接
                let detailA = document.createElement('a');
                detailA.className = 'more';
                detailA.href = 'art.html?blogId=' + blog.blogId;
                detailA.innerHTML = '查看全文&gt;&gt;';
                blogDiv.appendChild(detailA);
                // 加入到 right 中
                rightDiv.appendChild(blogDiv);
            }
        }

        // 把毫秒级时间戳转化成格式化日期
        function DateFormat(timeStampMS) {
            var date = new Date(timeStampMS);
 
            var year = date.getFullYear(),
                month = date.getMonth()+1,//月份是从0开始的
                day = date.getDate(),
                hour = date.getHours(),
                min = date.getMinutes(),
                sec = date.getSeconds();
            var newTime = year + '-' +
                        (month < 10? '0' + month : month) + '-' +
                        (day < 10? '0' + day : day) + ' ' +
                        (hour < 10? '0' + hour : hour) + ':' +
                        (min < 10? '0' + min : min) + ':' +
                        (sec < 10? '0' + sec : sec);
        
            return newTime;
        }
    </script>
</body>
</html>